<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta name="Description" content="页面描述" />
	<meta name="Keywords" content="页面关键字" />
	<meta name="viewport" content="width=640,minimum-scale=0,maximum-scale=5,user-scalable=no">
	<script>
		if (navigator.appVersion.indexOf('Android') != -1) {
			document.addEventListener("DOMContentLoaded", function (e) {
				document.querySelector('body').style.zoom = e.target.activeElement.clientWidth / 640;
			});
		}
	</script>
	<title>活动详情</title>
	<link href="css/common.css" rel="stylesheet">
</head>
<body>
	<div class="activity-center-detail">
		<section class="activity-detail-top bb mt">
			<p class="news-detail-title">力力鱼缸最新活动折扣</p>
			<div class="c co2">
				<span class="fl">2016-02-26</span>
				<div class="fr">
					<span>分享9999</span>
					<span>阅读99999</span>
				</div>
			</div>
		</section>
		<section class="activity-detail-info bt bb mt">
			<ul>
				<li>时间: 02-26（星期5）19：00 至02-26  22：00 </li>
				<li>地址: 长沙华美达大酒店</li>
				<li>
					<span class="fl">会员等级: 白银会员</span>
					<span class="fr co1">是否收费: 是</span>
				</li>
				<li>
					<span class="fl co2">已有 <em class="co1">1000</em> 报名</span>
					<span class="fr co2">不限制报名人数</span>
					<img src="images/banner.jpg" width="100%" />
				</li>
			</ul>
		</section>
		<section class="activity-detail-list">
			<p class="activity-detail-list-tit co2 tc">已报名用户</p>
			<ul>
				<li>
					<img src="images/head.jpg" width="60" height="60" class="fl" />
					<span class="fl">喻霞军</span>
					<span class="fr">03-07</span>
				</li>
				<li>
					<img src="images/head.jpg" width="60" height="60" class="fl" />
					<span class="fl">杨丽萍</span>
					<span class="fr">03-07</span>
				</li>
				<li>
					<img src="images/head.jpg" width="60" height="60" class="fl" />
					<span class="fl">李华</span>
					<span class="fr">03-07</span>
				</li>
				<li>
					<img src="images/head.jpg" width="60" height="60" class="fl" />
					<span class="fl">朱秀</span>
					<span class="fr">03-07</span>
				</li>
				<li>
					<img src="images/head.jpg" width="60" height="60" class="fl" />
					<span class="fl">龙凤</span>
					<span class="fr">03-07</span>
				</li>
				<li>
					<img src="images/head.jpg" width="60" height="60" class="fl" />
					<span class="fl">姚三元</span>
					<span class="fr">03-07</span>
				</li>
				<li>
					<img src="images/head.jpg" width="60" height="60" class="fl" />
					<span class="fl">李霞</span>
					<span class="fr">03-07</span>
				</li>
			</ul>
			<a href="javascript:;" class="activity-detail-more co2 tc">查看更多报名用户</a>
		</section>
	</div>
	<a href="javascript:popShow('.pop');" class="generate">我要报名</a>
	<section class="pop">
		<div class="pop-desc tc">报名成功</div>
		<a href="javascript:popHide();" class="pop-dete">确定</a>
	</section>
</body>
<script src="js/zepto.min.js"></script>
<script>
	//弹窗
	function popShow(id) {
		var p = $(id);
		if (p) {
			p.show();
			p.css({
				position: 'fixed',
				top: '50%',
				left: '50%',
				marginTop: -p.height() / 2,
				marginLeft: -p.width() / 2,
				zIndex: 1000
			});
			p.attr('for', 'pop');
			$('body').append('<div for="overlay" style="width:100%;height:100%;position:fixed;top:0;left:0;z-index:999;background:rgba(0,0,0,0.6);"></div>');
		}
	}
	function popHide(){
		$('[for="pop"]').hide();
		$('[for="overlay"]').remove();
	}
</script>
</html>